<template>
  <div>
    <div style="background-color: #ffffff;">
      <a-button
        style="margin: 12px 0 8px 18px;"
        type="primary"
        @click="() => $emit('hide-detail')"
      >
        返回
      </a-button>
    </div>

    <a-card :bordered="false">
      <a-tabs v-model="activeKey" @change="handleTabsChange">
        <a-tab-pane
          tab="L1层：基础设施"
          key="0"
        >
          <BaseInfrastructure
            :resourceData="resourceData"
            :chartData="chartData"
          />
        </a-tab-pane>

        <a-tab-pane
          tab="L2层：IT设备"
          key="1"
        >
          <ItInfrastructure :resourceData="resourceData" />
        </a-tab-pane>

        <a-tab-pane
          tab="L3层：云平台资源"
          key="2"
        >
          <PlatformResource :platformData="platformData" />
        </a-tab-pane>

        <a-tab-pane
          tab="L4层：应用资源"
          key="3"
        >
          <AppResource :appResourceData="appResourceData" />
        </a-tab-pane>
      </a-tabs>
    </a-card>
  </div>
</template>

<script>
  import { gPostAction } from '@/api/manage'
  import AppResource from './components/AppResource'
  import BaseInfrastructure from './components/BaseInfrastructure'
  import ItInfrastructure from './components/ItInfrastructure'
  import PlatformResource from './components/PlatformResource'

  export default {
    name: 'OverView',
    props: {
      dataCenterId: {
        type: String,
        default: ''
      }
    },
    components: {
      AppResource,
      BaseInfrastructure,
      ItInfrastructure,
      PlatformResource,
    },
    data() {
      return {
        activeKey: '0',
        resourceData: {},
        appResourceData: {},
        platformData: {
          vmNum: 0,
          dockerNum: 0,
        },
        chartData: {
          temperature: 0,
          humidity: 0,
          pue: 0
        }
      }
    },
    mounted() {
      // this.loadOverViewInfo()
      this.handleTabsChange()
    },
    methods: {
      handleTabsChange() {
        let key = this.activeKey;
        if (key === '0') {
          this.loadCountItDevice("多数据中心调度-数据跨层感知与智能分析-L1层：基础设施","查看基础设施资源统计");
          this.loadLatestSample(0)
          this.loadLatestSample(1)
          this.loadLatestSample(2)
        } else if (key === '1') {
          this.loadCountItDevice("多数据中心调度-数据跨层感知与智能分析-L2层：IT设备","查看IT设备资源统计");
        } else if (key === '2') {
          this.loadCloudResource(0);
          this.loadCloudResource(1);
        } else if (key === '3') {
          this.loadCountAppProfile();
        }
      },
      loadOverViewInfo() {
        this.loadCountItDevice()
        this.loadCountAppProfile()
        this.loadCloudResource(0)
        this.loadCloudResource(1)
        this.loadLatestSample(0)
        this.loadLatestSample(1)
        this.loadLatestSample(2)
      },
      loadCountItDevice(text, action) {
        const postData = {
          datacenterId: this.dataCenterId,
          title: text,
          content: action
        }

        gPostAction('/asset/countItDevice', postData).then(res => {
          if (res.success) {
            this.resourceData = res.data
          }
        })
      },
      loadCountAppProfile() {
        const postData = {
          datacenterId: this.dataCenterId,
          title: "多数据中心调度-数据跨层感知与智能分析-L4层：应用资源",
          content: "查看应用资源统计"
        }

        gPostAction('/profile/countAppProfile', postData).then(res => {
          if (res.success) {
            this.appResourceData = res.data
          }
        })
      },
      loadCloudResource(type) {
        const postData = {
          pageSize: 9999,
          title: "多数据中心调度-数据跨层感知与智能分析-L3层：云平台资源",
          content: "查看云平台资源统计",
          datacenterId: this.dataCenterId,
          type
        }
        gPostAction('/cloud_resource/page', postData).then(res => {
          if (res.success) {
            if (type === 0) {
              this.platformData.vmNum = res.data.totalCount
            } else if (type === 1) {
              this.platformData.dockerNum = res.data.totalCount
            }
          }
        })
      },
      loadLatestSample(key) {
        const meter = ['environment.air_out_temperature', 'environment.air_out_humidity', 'datacenter.pue']
        const postData = {
          meter: meter[key],
          resourceId: this.dataCenterId
        }

        gPostAction('/statistics/latestSample', postData).then(res => {
          if (res.success) {
            const num = parseFloat(res.data || 0)
            if (key === 0) {
              this.chartData.temperature = num
            } else if (key === 1) {
              this.chartData.humidity = num
            } else if (key === 2) {
              this.chartData.pue = num
            }
          }
        })
      },
    },
  }
</script>
